<template>
  <div class="msg">
    <div>
      <input placeholder="🔍搜索消息" 
      v-model="msg"  
      @keyup.enter="enterFun"/>
    </div>
    <div class="box" v-for="(item,index) in list" :key="index" >
        {{item.title}}
    </div>
    <div v-if="list.length == 0" class="body-msg">暂无最新消息</div>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      msg:'',
      list:[
        {title:'第一条消息',index:0},
        {title:'第二条消息',index:1},
        {title:'第三条消息',index:2},
      ],
      // msg:JSON.parse(window.localStorage.getItem('msg_key')||'[]')
    };
  },
  methods:{
    enterFun(){
      this.list.push({
        title:this.msg,
        index:0,
      }),
      this.msg=''
    }
  },
  // watch:{
  //   msg:{
  //     deep:true,
  //     handler:function(value){
  //       window.localStorage.setItem('msg_key',JSON.stringify(value))
  //     }
  //   }
  // }
};
</script>
<style lang="scss">
input {
  width: 90%;
  height: 30px;
  border-radius: 20px;
  text-indent: 1em;
  margin-top: 10px;
  outline: none;
  text-indent: 2em;
}
.body-msg {
  margin-top: 50%;
}
.box{
  height: 30px;
  background-color: #fff;
}
</style>